<template>
    <div id="supplier">
<!-- 供应商 查询 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="3" :md="2" :lg="2" style="margin: 0 0 0 2%">
                <el-input placeholder="供应商代码" v-model="SupplierCode"></el-input>
            </el-col>
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1%">
                <el-input placeholder="供应商名称" v-model="SupplierName"></el-input>
            </el-col>
            <el-col :xs="8" :sm="8" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增供应商</el-button>
            </el-col>
        </div>
        <!-- 供应商 表格 -->
        <el-table  max-height="600" class="table_supplier" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="ID" sortable label="代号ID" v-if="false"></el-table-column>
            <el-table-column prop="SupplierCode" label="供应商代码"></el-table-column>
            <el-table-column prop="SupplierName" sortable label="供应商名称" ></el-table-column>
            <el-table-column prop="MOQ" sortable label="MOQ"></el-table-column>
            <el-table-column prop="SendGoodsWay" sortable label="送货方式"></el-table-column>
            <el-table-column prop="CloseAccountsWay" sortable label="结款方式"></el-table-column>
            <el-table-column prop="MonthlyKnotDays" sortable label="月结天数"></el-table-column>
            <el-table-column prop="SupplierAddress" sortable label="供应商地址"></el-table-column>
            <el-table-column  label="联系人">
                <template scope="scope">
                    <el-button size="small" type="warning" @click="Supplier(scope.$index, scope.row)">联系人</el-button>
                </template>
            </el-table-column>
            <el-table-column  label="所供物料清单">
                <template scope="scope">
                    <el-button size="small" type="success" @click="SupplierMateriel(scope.$index, scope.row)">所供物料清单</el-button>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column prop="ModifyDate" sortable label="时间"  width="100"></el-table-column>
            <el-table-column prop="OperationUser" sortable label="操作人员ID" v-if="false"></el-table-column>
            <el-table-column prop="OperationUserName" sortable label="操作人员"  width="120"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作" fixed="right" width="180">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增供应商 -->
        <el-dialog title="新增供应商" :visible.sync="dialogFormVisible" >
            <el-form :model="form" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="供应商代号" :label-width="formLabelWidth">
                    <el-input v-model="form.SupplierCode" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称" :label-width="formLabelWidth">
                    <el-input v-model="form.SupplierName" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="MOQ" :label-width="formLabelWidth">
                    <el-input v-model="form.MOQ" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="结款方式" :label-width="formLabelWidth">
                    <div style="display: flex;">
                        <div style="flex: 2;">
                            <el-select v-model="form.CloseAccountsWay" placeholder="请选择">
                                <el-option label="款到发货" value="1"></el-option>
                                <el-option label="货到付款" value="2"></el-option>
                                <el-option label="见票付款" value="3"></el-option>
                                <el-option label="月结" value="4"></el-option>
                            </el-select>
                        </div>
                        <div style="flex: 1;">
                            <el-input v-model="form.MonthlyKnotDays" placeholder="月结天数"></el-input>
                        </div>
                        <div style="flex: 3;"></div>
                    </div>
                </el-form-item>
                <el-form-item label="送货方式" :label-width="formLabelWidth">
                    <el-select v-model="form.SendGoodsWay" placeholder="请选择">
                        <el-option label="上门取货" value="1"></el-option>
                        <el-option label="送货上门" value="2"></el-option>
                        <el-option label="快递" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商地址" :label-width="formLabelWidth">
                    <el-input v-model="form.SupplierAddress" type="textarea" :autosize="{ minRows: 0, maxRows: 8}"  auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 供应商 -->
        <el-dialog title="修改供应商" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="供应商代号" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.SupplierCode" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.SupplierName" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="MOQ" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.MOQ" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="结款方式" :label-width="formLabelWidth">
                    <div style="display: flex;">
                        <div style="flex: 2;">
                            <el-select v-model="formEdit.CloseAccountsWay" placeholder="请选择">
                                <el-option label="款到发货" value="款到发货"></el-option>
                                <el-option label="货到付款" value="货到付款"></el-option>
                                <el-option label="见票付款" value="见票付款"></el-option>
                                <el-option label="月结" value="月结"></el-option>
                            </el-select>
                        </div>
                        <div style="flex: 1;">
                            <el-input v-model="formEdit.MonthlyKnotDays" placeholder="月结天数"></el-input>
                        </div>
                        <div style="flex: 3;"></div>
                    </div>
                </el-form-item>
                <el-form-item label="送货方式" :label-width="formLabelWidth">
                    <el-select v-model="formEdit.SendGoodsWay" placeholder="请选择">
                        <el-option label="上门取货" value="上门取货"></el-option>
                        <el-option label="送货上门" value="送货上门"></el-option>
                        <el-option label="快递" value="快递"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商地址" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.SupplierAddress" type="textarea" :autosize="{ minRows: 0, maxRows: 8}"  auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="删除供应商" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此供应商吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>

        <!-- 供应商 联系人 -->
        <!-- 联系人 表格  1111111111 -->
        <el-dialog title="供应商联系人" :visible.sync="SupplierFormVisible" >
            <el-form :model="formSupplier" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <div style="width: 100%;height: 65px;display: flex;">
                    <div style="flex: 1;text-align: left">
                        供应商代码：<span>{{formSupplier.SupplierCode}}</span>
                    </div>
                    <div style="flex: 1;text-align: right">
                        <el-button type="success" @click="addSupplier">新增联系人</el-button>
                    </div>
                </div>
                <!-- 联系人表格 -->
                <el-table  max-height="600" class="table_Supplier" stripe border ref="SupplierTable" :data="tableSupplier" tooltip-effect="dark"
                           style="width: 100%;text-align: center !important;margin: auto">
                    <el-table-column prop="index" sortable width="60"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="SupplierCode" sortable label="供应商代码" v-if="false"></el-table-column>
                    <el-table-column prop="SupplierName" sortable label="供应商名称"></el-table-column>
                    <el-table-column prop="ContactPeople" sortable label="联系人"></el-table-column>
                    <el-table-column prop="MobilePhone" sortable label="手机号码"></el-table-column>
                    <el-table-column prop="Duty" sortable label="职务"></el-table-column>
                    <!-- 操作人 日期 -->
                    <el-table-column prop="ModifyDate" sortable label="修改日期"></el-table-column>
                    <el-table-column prop="OperationUser" sortable label="操作人员ID" v-if="false"></el-table-column>
                    <el-table-column prop="OperationUserName" sortable label="操作人员"></el-table-column>
                    <!-- 修改和删除 -->
                    <el-table-column prop="edit" label="操作" fixed="right">
                        <template scope="scope">
                            <el-button size="small" @click="SupplierEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="SupplierDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="SupplierFormVisible = false">关 闭</el-button>
                <!--<el-button type="primary" @click="SupplierForm">确 定</el-button>-->
            </div>
        </el-dialog>
        <!-- 新增 联系人 -->
        <el-dialog title="新增联系人" :visible.sync="dialogSupplierVisible" >
            <el-form :model="formSupplierAdd" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="供应商代号" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplier.SupplierCode" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplier.SupplierName" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="联系人员" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierAdd.ContactPeople" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierAdd.MobilePhone" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="职务" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierAdd.Duty" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierAdd.Remark"  type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSupplierVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSupplierForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 联系人 -->
        <el-dialog title="修改联系人" :visible.sync="EditSupplierVisible">
            <el-form :model="formSupplierEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="供应商代号" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplier.SupplierCode" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplier.SupplierName" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="联系人员" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierEdit.ContactPeople" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierEdit.MobilePhone" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="职务" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierEdit.Duty" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierEdit.Remark"  type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditSupplierVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditSupplierForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除 联系人 -->
        <el-dialog title="删除联系人" :visible.sync="DeleteSupplierVisible">
            <el-form :model="formSupplierDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此联系人吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteSupplierVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteSupplierForm" >确定</el-button>
            </div>
        </el-dialog>


        <!-- 供应商物料清单 -->
        <!-- 1、所能供应的表格 -->
        <el-dialog title="供应商物料清单" :visible.sync="SupplierMaterFormVisible" >
            <el-form :model="formSupplierMater" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <div style="width: 100%;height: 65px;display: flex;">
                    <div style="flex: 1;text-align: left">
                        供应商代码：<span>{{formSupplierMater.SupplierCode}}</span>
                    </div>
                    <div style="flex: 1;text-align: right">
                        <el-button type="success" @click="addSupplierMater">新增所供物料</el-button>
                    </div>
                </div>
                <!-- 所供物料表格 -->
                <el-table  max-height="600" class="table_Supplier" stripe border ref="SupplierTable" :data="tableSupplierMater" tooltip-effect="dark"
                           style="width: 100%;text-align: center !important;margin: auto">
                    <el-table-column prop="index" sortable width="60"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="SupplierCode" sortable label="供应商代码" v-if="false"></el-table-column>
                    <el-table-column prop="SupplierName" sortable label="供应商名称"></el-table-column>
                    <el-table-column prop="MaterielCode" sortable label="物料料号ID" v-if="false"></el-table-column>
                    <el-table-column prop="MaterielNum" sortable label="物料料号"></el-table-column>
                    <el-table-column prop="MaterielName" sortable label="物料名称"></el-table-column>
                    <el-table-column prop="UnitPrice" sortable label="价格"></el-table-column>
                    <el-table-column prop="ReMark" sortable label="备注"></el-table-column>
                    <!-- 操作人 日期 -->
                    <el-table-column prop="ModifyDate" sortable label="修改日期"></el-table-column>
                    <el-table-column prop="OperationUser" sortable label="操作人员ID" v-if="false"></el-table-column>
                    <el-table-column prop="OperationUserName" sortable label="操作人员"></el-table-column>
                    <!-- 修改和删除 -->
                    <el-table-column prop="edit" label="操作" fixed="right">
                        <template scope="scope">
                            <el-button size="small" @click="MaterielEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="MaterielDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="SupplierMaterFormVisible = false">关 闭</el-button>
                <!--<el-button @click="SupplierMaterFormVisible = false">确 定</el-button>-->
            </div>
        </el-dialog>
        <!-- 2、点击新增 出现弹框 显示全部物料 -->
        <el-dialog title="新增供应商所供物料" :visible.sync="MaterAllFormVisible" >
            <el-form :model="formMaterAdd" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <div style="width: 100%;height: 65px;display: flex;">
                    <div style="flex: 1;text-align: left">
                        供应商代码：<span>{{formSupplierMater.SupplierCode}}</span>
                    </div>
                    <div style="flex: 1;text-align: left">
                        供应商名称：<span>{{formSupplierMater.SupplierName}}</span>
                    </div>
                </div>
                <!-- 全部 物料 表格 -->
                <el-table  max-height="600" class="table_Supplier" stripe border :data="tableMaterAll" tooltip-effect="dark"
                           isEdit="true" :cell-edit-done="cellEditDone" @selection-change="handleSelectionChange" style="width: 100%;text-align: center !important;margin: auto">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="index" sortable width="60"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="MaterielCode" sortable label="物料代号ID" v-if="false"></el-table-column>
                    <el-table-column prop="MaterielNum" sortable label="物料料号"></el-table-column>
                    <el-table-column prop="MaterielName" sortable label="物料名称"></el-table-column>
                    <el-table-column prop="Specifications" sortable label="物料规格"></el-table-column>
                    <el-table-column prop="SpecExplain" sortable label="物料说明"></el-table-column>
                    <!-- 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 -->
                    <!--<el-table-column sortable label="价格">-->
                        <!--<el-input v-model="price"></el-input>-->
                    <!--</el-table-column>-->
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="MaterAllFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMaterForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 3、点击修改 -->
        <el-dialog title="修改所供物料" :visible.sync="EditMaterielVisible">
            <el-form :model="formMaterielEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="供应商代号" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierMater.SupplierCode" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formSupplierMater.SupplierName" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="物料料号" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formMaterielEdit.MaterielNum" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="物料名称" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formMaterielEdit.MaterielName" :disabled="true" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formMaterielEdit.UnitPrice" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidthSupplierAdd">
                    <el-input v-model="formMaterielEdit.ReMark"  type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditMaterielVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditMaterielForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 4、删除 -->
        <el-dialog title="删除所供物料" :visible.sync="DeleteMaterielVisible">
            <el-form :model="formMaterielDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除供应商提供的此物料吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteMaterielVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteMaterielForm" >确定</el-button>
            </div>
        </el-dialog>



    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                //    表格
                tableData:[],
                //   按条件 查询
                SupplierCode: '',
                SupplierName:'',
                //     分页
                PageCount:10 ,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
                //  新增
                dialogFormVisible: false,
                form: {
                    "SupplierCode":'',
                    "SupplierName":'',
                    "SupplierAddress":'',    //  地址
                    "CloseAccountsWay":'',  //  付款方式
                    "SendGoodsWay":'',   //  送货方式
                    "MonthlyKnotDays":'',      //  月结数字
                    "MOQ":'',  //  MOQ
                    "OperationUser":1
                },
                formLabelWidth: '120',
                //  修改 供应商
                EditFormVisible: false,
                formEdit:{},
                formLabelWidthEdit:'120',
                //  删除
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'120',
                //  联系人
                tableSupplier:[],    //  联系人表格
                SupplierFormVisible: false,
                formSupplier:{},
//                _SupplierCode:'',     //   不显示
                //  新增联系人
                dialogSupplierVisible: false,
                formSupplierAdd:{     //   》》》》》》》》》》》》》》
                    SupplierCode:'',
                    ContactPeople:'',
                    MobilePhone:'',
                    Duty:'',
                    Remark:'',
                    OperationUser:'',
                },
                formLabelWidthSupplierAdd:'120',
                //  修改 联系人
                EditSupplierVisible: false,
                formSupplierEdit:{},
                formSupplierWidthEdit:'120',
                //  删除 联系人
                DeleteSupplierVisible: false,
                formSupplierDelete:{},


                //  所供 物料   》》》》》》》》》》》》》》》》》》》》》》》》》》
                tableSupplierMater:[],    //  物料 表格
                SupplierMaterFormVisible: false,
                formSupplierMater:{},

//                price:'',   //  测试

                //   新增
                tableMaterAll:[] ,   //  所有物料 表格
                MaterAllFormVisible: false,
                formMaterAdd:{},
                multipleSelection:[] ,
                MaterielCodeS:[] ,    //  勾选的 物料 code 集合
                //  修改
                EditMaterielVisible:false ,
                formMaterielEdit:{},
                //  删除
                DeleteMaterielVisible: false,
                formMaterielDelete:{},
            }
        },
        methods: {
            //    分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   供应商  表格
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                url = "http://192.168.3.238:8088/SupplierManage/GetSupplierPage?SupplierCode=" + this.SupplierCode + "&SupplierName=" +
                    this.SupplierName + "&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage;
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableData=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableData.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("供应商表格")
                    console.log(res)
                }, response => {
                    console.log("表格添加失败")
                    console.log(response)
                })
            },
            //   新增供应商
            add() {
                console.log("点击新增按钮 ")
                this.dialogFormVisible = true;
            },
            addForm(){
                let addUrl = "http://192.168.3.238:8088/SupplierManage/AddSupplier";
                let addForm = {
                    "SupplierCode":this.form.SupplierCode,
                    "SupplierName":this.form.SupplierName,     //
                    "SupplierAddress":this.form.SupplierAddress,    //  地址
                    "CloseAccountsWay":this.form.CloseAccountsWay,  //  结款方式
                    "SendGoodsWay":this.form.SendGoodsWay,   //  送货方式
                    "MonthlyKnotDays":this.form.MonthlyKnotDays,      //  月结数字
                    "MOQ":this.form.MOQ,  //  MOQ
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                if(this.form.SupplierCode.length === 0){
                    alert("请输入供应商代号");
                    return 0;
                }else if(this.form.CloseAccountsWay == 4 && this.form.MonthlyKnotDays.length ==0 ){
                    alert("请输入月结天数");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogFormVisible = false ;
                            that.selectTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            //   修改供应商
            handleEdit(index, row) {
                this.EditFormVisible = true;
                this.formEdit = row ;
                console.log("点击编辑按钮")
                console.log(this.formEdit)
            },
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/SupplierManage/UpdateSupplier";
                let EditForm = {
                    "ID":this.formEdit.ID,
                    "SupplierCode":this.formEdit.SupplierCode,     //
                    "SupplierName":this.formEdit.SupplierName,
                    "SupplierAddress":this.formEdit.SupplierAddress,  //  地址
                    "CloseAccountsWay":this.formEdit.CloseAccountsWay,   //  结款方式
                    "SendGoodsWay":this.formEdit.SendGoodsWay,      //  送货方式
                    "MonthlyKnotDays":this.formEdit.MonthlyKnotDays,  //  月结天数
                    "MOQ":this.formEdit.MOQ,   //  MOQ
                    "OperationUser":1
                };
                console.log("修改供应商");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  删除
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/SupplierManage/DeleteSupplier";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "SupplierCode":this.formDelete.SupplierCode,
                    "OperationUser":1
                };
                console.log("url")
                console.log(DeleteUrl)
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },
            //  联系人 按钮   >>>>>》》》》》》》》》》
            Supplier(index, row){
                this.formSupplier = row;
//                this._SupplierCode = row.SupplierCode;
                this.selectSupplierTable();
                this.SupplierFormVisible = true ;
                console.log("供应商联系人")
                console.log(this.formSupplier)
//                console.log(this._SupplierCode)
            },
            //   联系人表格
            selectSupplierTable(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/SupplierManage/GetSupplierContactPeople?SupplierCode=" + this.formSupplier.SupplierCode
                console.log("供应商 联系人表格");
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableSupplier=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
//                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableSupplier.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("联系人表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  联系人弹框  确定按钮
            SupplierForm(){
                this.SupplierFormVisible = false ;
            },
            //  新增联系人
            addSupplier(){
                console.log("点击新增联系人按钮 ")
                this.dialogSupplierVisible = true;
            },
            addSupplierForm(){
                //   post
                let addUrl = "http://192.168.3.238:8088/SupplierManage/AddSupplierContactPeople";
                let addForm = {
                    "SupplierCode":this.formSupplier.SupplierCode,
                    "ContactPeople":this.formSupplierAdd.ContactPeople,     //  姓名
                    "MobilePhone":this.formSupplierAdd.MobilePhone,     //  手机
                    "Duty":this.formSupplierAdd.Duty,  //  职务
                    "Remark":this.formSupplierAdd.Remark,   // 备注
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                if(this.formSupplierAdd.ContactPeople.length === 0){
                    alert("请输入联系人员");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogSupplierVisible = false ;
                            that.selectSupplierTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            //   修改联系人
            SupplierEdit(index, row) {
                this.EditSupplierVisible = true;
                this.formSupplierEdit = row ;
                console.log("点击编辑联系人按钮");
                console.log(this.formSupplierEdit)
            },
            //  修改联系人  按钮
            EditSupplierForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/SupplierManage/UpdateSupplierContactPeople";
                let EditForm = {
                    "ID":this.formSupplierEdit.ID,
                    "ContactPeople":this.formSupplierEdit.ContactPeople,
                    "MobilePhone":this.formSupplierEdit.MobilePhone,
                    "Duty":this.formSupplierEdit.Duty,
                    "Remark":this.formSupplierEdit.Remark,
                    "OperationUser":1
                };
                console.log("修改联系人 》》》》》》》》》");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditSupplierVisible = false;
                        that.selectSupplierTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  删除 联系人
            SupplierDelete(index, row){
                this.DeleteSupplierVisible = true ;
                this.formSupplierDelete = row ;
            },
            DeleteSupplierForm(){
                let DeleteUrl = "http://192.168.3.238:8088/SupplierManage/DeleteSupplierContactPeople";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "ID":this.formSupplierDelete.ID,
                    "OperationUser":1,
                };
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)

                        that.DeleteSupplierVisible = false;     //  关闭窗口
                        that.selectSupplierTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },

            //  所供物料  按钮   >>》》》》》》》》》》》》》》》》》》》》》》》》
            SupplierMateriel(index, row){
                this.formSupplierMater = row;
                this.selectSupplierMaterTable();
                this.SupplierMaterFormVisible = true ;
                console.log("供应商物料")
                console.log(this.SupplierMaterFormVisible)
            },
            //  物料表格
            selectSupplierMaterTable(){
                let url = "http://192.168.3.238:8088/SupplierManage/GetSupplierProduct?SupplierCode=" + this.formSupplierMater.SupplierCode ;
                console.log("物料表格");
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableSupplierMater=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
//                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableSupplierMater.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("物料表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //   新增物料
            //  新增   按钮
            addSupplierMater() {
                this.selectMaterAllTable();
                console.log("点击新增按钮 ")
                this.MaterAllFormVisible = true;
            },
            //   请求所有物料的表格
            selectMaterAllTable(){
                let url = "http://192.168.3.238:8088/MaterielManager/GetMaterielByType?MaterielType=1";
                console.log("所有物料表格");
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableMaterAll=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
//                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableMaterAll.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("所有物料表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            } ,
            //  新增  勾选选择的物料
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.MaterielCodeS=[];
                for(let i=0; i<val.length; i++){
                    console.log("勾选的")
                    console.log(val[i].MaterielCode);
                    this.MaterielCodeS.push(val[i].MaterielCode);
                }
                console.log("勾选的是什么")
                console.log(this.MaterielCodeS);
                console.log(this.multipleSelection);
            } ,
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
            cellEditDone(newValue,oldValue,rowIndex,rowData,field){
                console.log("表格可编辑")
                console.log(newValue)
                console.log(oldValue)
                console.log(rowIndex)
                console.log(rowData)
                console.log(field)
                this.tableData[rowIndex][field] = newValue;
                console.log("newValue")
                console.log(newValue)
//                this.price = newValue ;
                // 接下来处理你的业务逻辑，数据持久化等...
            },
            //  确定 按钮
            addMaterForm(){
                let addUrl = "http://192.168.3.238:8088/SupplierManage/AddSupplierProduct";
                let addForm = {
                    "SupplierCode":this.formSupplierMater.SupplierCode,
                    "MaterielCodeS":this.MaterielCodeS,     //  集合
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.MaterAllFormVisible = false ;
                            that.selectSupplierMaterTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
            },
            //  修改 按钮
            MaterielEdit(index, row) {
                this.EditMaterielVisible = true;
                this.formMaterielEdit = row ;
                console.log("点击编辑按钮");
                console.log(this.formMaterielEdit)
            },
            //   修改物料
            EditMaterielForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/SupplierManage/UpdateSupplierProduct";
                let EditForm = {
                    "ID":this.formMaterielEdit.ID,
                    "UnitPrice":this.formMaterielEdit.UnitPrice,
                    "ReMark":this.formMaterielEdit.ReMark,
                    "OperationUser":1
                };
                console.log("修改 》》》》》》》》》");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditMaterielVisible = false;
                        that.selectSupplierMaterTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //   删除物料
            MaterielDelete(index, row){
                this.DeleteMaterielVisible = true ;
                this.formMaterielDelete = row ;
            },
            DeleteMaterielForm(){
                let DeleteUrl = "http://192.168.3.238:8088/SupplierManage/DeleteSupplierProduct";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "ID":this.formMaterielDelete.ID,
                    "OperationUser":1,
                };
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)
                        that.DeleteMaterielVisible = false;     //  关闭窗口
                        that.selectSupplierMaterTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },

        },
        mounted: function () {   //  onload
            this.selectTable();
        }
    }
</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #supplier {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_supplier thead tr th {
        text-align: center;
    }
</style>